import React from 'react'
// 01: 引入 useRoutes 这个hooks
import { Route, Routes, Navigate, useRoutes } from 'react-router-dom';

// 引入对应要匹配的路由页面级组件
import Category1 from './Category1'
import Home1 from './Home1'
import Detail1 from './Detail1'
type Props = {}

export default function Index({ }: Props) {
    // 02: 使用该hooks, useRoutes 创建一个路由规则对象,用来代替 下面Routes 这个路由规则
    const element = useRoutes([
        {
            path: '/home1',
            element: <Home1 />
        },
        {
            path: '/category1',
            element: <Category1 />
        },
        {
            path: '/detail1',
            element: <Detail1 />
        },
        {
            path: '/',
            element: <Navigate to='/home1' />
        },

    ])
    console.log('elment', element)
    return (
        // <Routes>
        //     <Route path='/home1' element={<Home1 />}></Route>
        //     {/* caseSensitive 表示 path匹配的时候,不忽略大小写,严格匹配 */}
        //     {/* <Route path='/CATEGORY1' caseSensitive element={<Category1 />}></Route> */}
        //     <Route path='/category1' caseSensitive element={<Category1 />}></Route>
        //     <Route path='/detail1' element={<Detail1 />}></Route>
        //     {/* 
        //        路由重定向: 在v6中去掉了 Redirect 内置组件,引入 Navigate组件实现重定向
        //         注意: Navigate组件特点: 只要页面渲染该组件,就会执行to属性,跳转页面
        //     */}
        //     <Route path='/' element={<Navigate to='/home1' />}></Route>
        // </Routes>

        // 使用路由规则对象
        <>
            {element}
        </>
    )
}